<template>
    <div class="vav">
        <div class="vav-header">
            <div class="vav-header-actionBtns">
                <div class="btn" @click="open">
                    <img src="@/assets/images/bigScreen/open.png" alt="" width="48px" height="48px">
                    <div class="btn-content">开关</div>
                </div>
                <div class="btn" @click="warningLight">
                    <img src="@/assets/images/bigScreen/warningLight.png" alt="" width="48px" height="48px">
                    <div class="btn-content">紧急停止</div>
                </div>
                <div class="btn" @click="light">
                    <img src="@/assets/images/bigScreen/light.png" alt="" width="48px" height="48px">
                    <div class="btn-content">照明</div>
                </div>
                <div class="btn" @click="up">
                    <img src="@/assets/images/bigScreen/up.png" alt="" width="48px" height="48px">
                    <div class="btn-content">视窗上升</div>
                </div>
                <div class="btn" @click="down">
                    <img src="@/assets/images/bigScreen/down.png" alt="" width="48px" height="48px">
                    <div class="btn-content">视窗下降</div>
                </div>
            </div>
            <div class="vav-header-pic">
                <img src="@/assets/images/bigScreen/vav.png" alt="" height="100%">
            </div>
        </div>
        <div class="vav-content">
            <div class="vav-content-title">
                <div class="title">通风柜状态</div>
                <img src="@/assets/images/bigScreen/line1.png" alt="行为识别安全" class="title-img" />
            </div>
            <div class="vav-content-content">
                <div class="vav-content-item" v-for="(item, index) in trueEnvironment" :key="item.id">
                    <div class="vav-content-item-content">
                        <div class="vav-content-item-content-img">
                            <img :src="item.url" alt="" class="vav-content-item-pic" width="32px" height="32px" />
                        </div>
                        <div class="vav-content-item-content-info">
                            <div class="vav-content-item-name">{{ item.value }}</div>
                            <div class="vav-content-item-name">{{ item.content }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { environmentData } from '../bigScreen.data'
import { controlVav } from '@/api/bigScreen/bigScreen.api'
// 定义灯光的初始值
const lightStatus = ref('0')
// 定义通风柜的初始值
const vavStatus = ref('0')
// 定义温度
const temperature = ref('0')
// 定义视窗高度
const viewHeight = ref('0')
// 定义总排风量
const totalVolume = ref('0')
// 定义最小排风量
const minVolume = ref('0')
// 定义面风速
const windSpeed = ref('0')
// 定义排风阀开度
const openDegree = ref('0')
const open = async () => {
    try {
        let queryParams = {
            functionCode: '2',
            oper: '2',
            value: '0'
        }
        if (vavStatus.value === '1') {
            queryParams.value = '0'
            await controlVav(queryParams).then((res) => {
                if (res.code === 200) {
                    getVavStatus()
                    ElNotification({
                        title: '成功',
                        message: '通风柜已关闭！',
                        type: 'success',
                    })
                }
            })
        } else {
            queryParams.value = '1'
            await controlVav(queryParams).then((res) => {
                if (res.code === 200) {
                    getVavStatus()
                    ElNotification({
                        title: '成功',
                        message: '通风柜已开启！',
                        type: 'success',
                    })
                }
            })
        }
    } catch (error) {
        console.log('错误:' + error);
        ElNotification({
            title: '失败',
            message: '操作失败！',
            type: 'error',
        })
    }
}
const warningLight = async () => {
    try {
        await controlVav({
            functionCode: '3',
            value: '0',
            oper: '2',
        }).then((res) => {
            if (res.code === 200) {
                ElNotification({
                    title: '成功',
                    message: '强制关停成功！',
                    type: 'success',
                })
            }
        })
    } catch (error) {
        console.log('错误:' + error);
        ElNotification({
            title: '失败',
            message: '操作失败！',
            type: 'error',
        })
    }
}
const light = async () => {
    try {
        let queryParams = {
            functionCode: '18',
            oper: '2',
            value: '0'
        }
        if (lightStatus.value === '1') {
            queryParams.value = '0'
            await controlVav(queryParams).then((res) => {
                if (res.code === 200) {
                    getLightStatus()
                    ElNotification({
                        title: '成功',
                        message: '照明灯已关闭！',
                        type: 'success',
                    })
                }
            })
        } else {
            queryParams.value = '1'
            await controlVav(queryParams).then((res) => {
                if (res.code === 200) {
                    getLightStatus()
                    ElNotification({
                        title: '成功',
                        message: '照明灯已开启！',
                        type: 'success',
                    })
                }
            })
        }
    } catch (error) {
        console.log('错误:' + error);
        ElNotification({
            title: '失败',
            message: '操作失败！',
            type: 'error',
        })
    }
}
const up = async () => {
    try {
        await controlVav({
            functionCode: '5',
            value: '1',
            oper: '2',
        }).then((res) => {
            if (res.code === 200) {
                ElNotification({
                    title: '成功',
                    message: '视窗上升操作成功！',
                    type: 'success',
                })
            }
        })
    } catch (error) {
        console.log('错误:' + error);
        ElNotification({
            title: '失败',
            message: '操作失败！',
            type: 'error',
        })
    }
}
const down = async () => {
    try {
        await controlVav({
            functionCode: '5',
            value: '2',
            oper: '2',
        }).then((res) => {
            if (res.code === 200) {
                ElNotification({
                    title: '成功',
                    message: '视窗下降操作成功！',
                    type: 'success',
                })
            }
        })
    } catch (error) {
        console.log('错误:' + error);
        ElNotification({
            title: '失败',
            message: '操作失败！',
            type: 'error',
        })
    }
}

/**
 * 初始值设定
 */
const getLightStatus = async () => {
    try {
        await controlVav({
            functionCode: '18',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
                lightStatus.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}
const getVavStatus = async () => {
    try {
        await controlVav({
            functionCode: '2',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
                vavStatus.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}
const getTemp = async () => {
    try {
        await controlVav({
            functionCode: '9',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
                temperature.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}
const getViewHeight = async () => {
    try {
        await controlVav({
            functionCode: '11',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
            viewHeight.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}
const getTotalVolume = async () => {
    try {
        await controlVav({
            functionCode: '12',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
                totalVolume.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}
const getMinVolume = async () => {
    try {
        await controlVav({
            functionCode: '13',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
                minVolume.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}
const getWindSpeed = async () => {
    try {
        await controlVav({
            functionCode: '14',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
                windSpeed.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}
const getOpenDegree = async () => {
    try {
        await controlVav({
            functionCode: '15',
            value: '0',
            oper: '1',
        }).then((res) => {
            if (res.code === 200) {
                openDegree.value = res.result
            }
        })
    } catch (error) {
        console.log('错误:' + error);
    }
}

const trueEnvironment = computed(() => {
    return environmentData.map((item) => {
        if (item.id === '1') {
            item.value = temperature.value + '°C'
        }
        if (item.id === '2') {
            item.value = viewHeight.value + 'cm'
        }
        if (item.id === '3') {
            item.value = totalVolume.value + 'cmh'
        }
        if (item.id === '4') {
            item.value = minVolume.value + 'cmh'
        }
        if (item.id === '5') {
            item.value = windSpeed.value + 'm/s'
        }
        if (item.id === '6') {
            item.value = openDegree.value + '%'
        }
        return item;
    })
})


onMounted(() => {
    // 获取照明初始状态
    getLightStatus()
    // 获取通风柜初始状态
    getVavStatus()
    // 获取温度初始值
    getTemp()
    // 获取视窗高度初始值
    getViewHeight()
    // 获取总排风量初始值
    getTotalVolume()
    // 获取最小排风量初始值
    getMinVolume()
    // 获取面风速初始值
    getWindSpeed()
    // 获取排风阀开度初始值
    getOpenDegree()
})

</script>

<style lang="scss" scoped>
.vav {
    height: 100%;
    width: 100%;
    padding: 1px;

    .vav-header {
        height: 60%;
        background-image: url('@/assets/images/k_4.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: 15px;
        padding: 5%;
        display: flex;
        justify-content: space-evenly;

        &-actionBtns {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;

            .btn {
                width: 100%;
                height: 15%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                cursor: pointer;

                &-content {
                    margin-left: 5px;
                }

            }
        }

        &-pic {
            height: 100%;
        }
    }

    .vav-content {
        height: 35%;
        width: 100%;
        padding: 5px;
        background-image: url('@/assets/images/light_bg2.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;

        .vav-content-title {
            height: 15%;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .title {
                font-weight: bold;
                color: darkturquoise;
            }

            .title-img {
                width: 30%;
                height: 30%;
            }
        }

        .vav-content-content {
            padding: 3%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            font-size: 12px;

            .vav-content-item {
                width: 25%;
                text-align: center;
                margin-top: 5px
            }
        }
    }
}
</style>